Navigation

The navigation section has a lot to offer.
Bootstrap has a whole bunch of pre-written classes to be used with menu's / navigation bars!

This slide will show you a few of the more popular navigation classes.
Also you can search 'bootstrap navigation classes' and get a whole bunch of good resources.
You'll create a navigation bar of your choice for this website, below are some cool examples to look over!
All of the examples below use bootstrap navigation classes!

Standard Bootstrap Navigation Bar (click on 'About Me' to see the code):

Collapsed Navigation Bar: (Click the 'hamburger' button on the far right, also click on 'About Me' to see the code).

For this code to work, you must include these scripts between your head tags:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Navigation Bar with Dropdown: (Click on the arrow next to 'My Code Projects', also click on 'About Me' to see the code).

For this code to work, you must include these scripts between your head tags:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Navigation Bar with Image (click on 'About Me' to see the code):

Vertical Navigation Bar (click on 'About Me' to see the code):

Those are a few of the most common classes you can implement into your navigation bar. There are, of course, others.
Feel free to view more at w3schools & on Bootstraps main website.

The next slide will show you the classes that create these nav bars with the practice involved too!

Nav Classes

In previous slide showed you some common navigation bars.
This slide will go over the classes on how they were created!
Let's start with colors!

Dropdown Action!
Follow the directions on the left!

Activity!

This Activity will walk you through:

1. Creating a bootstrap navigation bar.

1. In your index.html page, replace the word MENU with opening and closing <nav> </nav> tags and add the classes:
   navbar - this one sets the navbar
   navbar-expand - displays the navbar horizontally
   bg-info - colors the background color to the 'info' setting (edit if you'd like).
   navbar-light - you can choose light or dark.
Hint <div class="row">
<div class="col-sm-12" id="menu">
<nav class="navbar navbar-expand bg-info navbar-light">

</nav>
</div>
</div> <!-- end menu row -->



Only copy in the code in bold.

The other tags are just to show you where in you index.html page they go.

2. Between your nav tags, add your opening and closing ul tags with class:
   navbar-nav - this class puts the navbar in a flex container and removes the list-style (bullet points).
Hint <div class="row">
<div class="col-sm-12" id="menu">
<nav class="navbar navbar-expand bg-info navbar-light">
<ul class="navbar-nav">

<ul
</nav>
</div>
</div> <!-- end menu row -->



Only add the code in bold.

3. Between your ul tags, create three opening and closing li tags with class:
   nav-item - spaces item in the nav bar correctly.
Hint <div class="row">
<div class="col-sm-12" id="menu">
<nav class="navbar navbar-expand bg-info navbar-light">
<ul class="navbar-nav">
<li class="nav-item">

</li>
<li class="nav-item">

</li>
<li class="nav-item">

</li>
<ul
</nav>
</div>
</div> <!-- end menu row -->



Only add the code in bold.

4. Between EACH li tag, create a link to a potential web page with attributes and values of:
   class = "nav-link" - nav-link displays the link correctly in the menu.
   href = "#" - # is just a placeholder until someone creates the new web page.
Hint <div class="row">
<div class="col-sm-12" id="menu">
<nav class="navbar navbar-expand bg-info navbar-light">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">My Code Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Me</a>
</li>
<ul>
</nav>
</div>
</div> <!-- end menu row -->



Only add the code in bold.

The next step will EDIT code you have in your stylesheet.css file.

5. In your stylesheet.css file, find your #menu reference and:
   Remove the border property.
   
Hint #menu {
margin-top:10px;
}



Your #menu reference in your stylesheet.css file should now ONLY have the margin attribute.

6. Edit your menu bar to look to the way you want.

Great Job! If you're menu bar looks how you want, move on to the next lesson!